<style lang="less">
     @import './index.less';
</style>

<template>
  <div>
    <Button icon="reply" type="text" @click="goForward">上一步</Button>
    <Card>
      <Row :gutter="10">
        <i-col span="18">
          <div style="padding:10px">
            <h2>{{customerInfo.contact_name}}</h2>
            <p>所属公司：{{customerInfo.customer_name}}</p>
            <p>职务：{{customerInfo.position}}</p>
            <p>联系电话：{{customerInfo.phone}}</p>
          </div>
        </i-col>
        <i-col span="6" class="margin-top-15">
          <modifyBtn  @modifyClick="modify"></modifyBtn>
        </i-col>
      </Row>
    </Card>
    <Row :gutter="10" class="margin-top-10">
      <i-col span="17">
        <Card dis-hover>
          <Tabs value="name1">
            <TabPane label="相关信息" name="name1">
              <Collapse>
                  <Panel name="1">销售机会
                    <Table slot="content" :columns="columns1" :data="chances"></Table>
                  </Panel>
                  <Panel name="2">拜访记录
                   
                    <Table slot="content" :columns="columns2" :data="visitList"></Table>
                  </Panel>
                    <!-- <Panel name="4">合同
                      <p slot="content">这里是合同的内容</p>
                    </Panel> -->
              </Collapse>
            </TabPane>
            <TabPane label="基本信息" name="name2">
              <div class="division-tips">
                  <span>
                    <!-- <Button size="small" type="text" icon="arrow-down-b"></Button> -->
                    <Icon type="arrow-down-b" size="12" class="padding-left-10 margin-right-10"></Icon>
                    个人信息
                  </span>
              </div>
              <div class="box">
                <Row>
                  <i-col span="12">
                    <p>姓名:{{customerInfo.contact_name}}</p>
                  </i-col>
                  <i-col span="12">
                    <p>所属公司：{{customerInfo.customer_name}}</p>
                  </i-col>
                </Row>
                <Row>
                  <i-col span="12">
                    <p>职务：{{customerInfo.position}}</p>
                  </i-col>
                  <i-col span="12">
                    <p>部门：{{customerInfo.org}}</p>
                  </i-col>
                </Row>
                <Row>
                  <i-col span="12">
                    <p>负责事项：{{customerInfo.responsibility}}</p>
                  </i-col>
                </Row>
              </div>
              <div class="division-tips">
                  <span>
                    <!-- <Button size="small" type="text" icon="arrow-down-b"></Button> -->
                    <Icon type="arrow-down-b" size="12" class="padding-left-10 margin-right-10"></Icon>
                    联系信息
                  </span>
              </div>
              <div class="box">
                <Row>
                  <i-col span="12">
                    <p>联系电话：{{customerInfo.phone}}</p>
                  </i-col>
                  <i-col span="12">
                    <p>邮箱：{{customerInfo.e_mail}}</p>
                  </i-col>
                </Row>
                <Row>
                  <i-col span="12">
                    <p>地址：{{customerInfo.address}}</p>
                  </i-col>
                </Row>
              </div>
            </TabPane>
          </Tabs>
        </Card>
      </i-col>
      <i-col span="7">
        <Card dis-hover>
          <Tabs value="1">
              <TabPane label="动态" name="1">
                <p>这里是动态里的内容</p>
              </TabPane>
              <TabPane label="团队成员" name="2">
                <p>团队成员里的内容</p>
              </TabPane>
          </Tabs>
        </Card>
      </i-col>
    </Row>
    <Modal v-model="modifyModal" title="修改客户信息" @on-ok="midifyCustomer" width="1000">
        <Form :model="modifyCustomerForm" label-position="right" :label-width="80" style="width:94%">
          <Row :gutter="10">
            <i-col span="11" offset="1">
              <FormItem label="企业名称">
                <Select v-model="modifyCustomerForm.customer_id" disabled>
                  <Option v-for="item in companyList" :value="item.customer_id" :key="item.customer_id">{{item.customer_name}}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="11">
              <FormItem label="合作部门">
                <Input type="text" v-model="modifyCustomerForm.org"></Input>
            </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="11" offset="1">
              <FormItem label="联系人">
                <Input type="text" v-model="modifyCustomerForm.contact_name"></Input>
                <Checkbox v-model="modifyCustomerForm.ismanager">是否为拍板人</Checkbox>
              </FormItem>
            </i-col>
            <i-col span="11">
              <FormItem label="电话">
                <Input type="text" v-model="modifyCustomerForm.phone"></Input>
            </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="11" offset="1">
              <FormItem label="职务">
                <Input type="text" v-model="modifyCustomerForm.position"></Input>
              </FormItem>
            </i-col>
            <i-col span="11">
              <FormItem label="负责事项">
                <Input type="text" v-model="modifyCustomerForm.responsibility"></Input>
            </FormItem>
            </i-col>
          </Row>
          <Row :gutter="10">
            <i-col span="11" offset="1">
              <FormItem label="邮箱">
                <Input type="text" v-model="modifyCustomerForm.e_mail"></Input>
              </FormItem>
            </i-col>
            <i-col span="11">
              <FormItem label="联系地址">
                <Input type="text" v-model="modifyCustomerForm.address"></Input>
            </FormItem>
            </i-col>
          </Row>
      </Form> 
    </Modal>
  </div>
</template>

<script>
import moment from 'moment';
import modifyBtn from './component/access-modify-button.vue';

export default {
  data() {
    return {
      modifyModal:false,
      modifyCustomerForm:{},
      customerInfo:{},
      chances:[],
      companyList:[],
      visitList:[],
      columns1: [
        {
          title: '序号',
          type: 'index',
          align:'center'
        },
        {
          title: '合作需求',
          key: 'demand',
          align:'center'
        },
        {
          title: '迫切程度',
          key: 'level',
          align:'center'
        },
        {
          title: '预计销售金额',
          key: 'predict_amount',
          align:'center'
        },
        {
          title: '预计签单时间',
          key: 'predict_sign_date',
          align:'center'
        },
        {
          title: '销售阶段',
          key: 'period',
          align:'center'
        },
        {
          title: '需要支援',
          key: 'assist',
          align:'center'
        },
        {
          title: '其他风险点',
          key: 'risk',
          align:'center'
        }
      ],
      columns2: [
        {
          title: '序号',
          type: 'index',
          align:'center'
        },
        {
          title: '拜访时间',
          key: 'visit_date',
          align:'center'
        },
        {
          title: '拜访情况',
          key: 'result',
          align:'center'
        },
        {
          title: '解决办法',
          key: 'solution',
          align:'center'
        },
        {
          title: '目前进展',
          key: 'goal',
          align:'center'
        },
        {
          title: '实际进展',
          key: 'progress',
          align:'center'
        },
      ]
  }
  },
  methods: {
    getCustomerInfo() {
      this.$http.get('/customer/contacts/' + this.$route.params.id).then((res) => {
        this.customerInfo = res.data.returnValue
      })
    },
    getCompanyList() {
      this.$http.get('/customer/customers').then((res) => {
        this.companyList = res.data.returnValue
      })
    },
    // 该联系人作为负责人的合同列表
    // getContracts() {
    //   this.$http.get('/fi/contracts/page?like=&customer_id=&org_id=&responsible='+this.customerInfo.employee_name+'&status=&pageSize=&currentPage=').then((res) => {
    //     this.contractData = res.data.returnValue
    //     console.info(res.data.returnValue)
    //   })
    // },
    // 与该联系人联系产生的销售机会列表
    getChances() {
      this.$http.get('/customer/contact/' + this.$route.params.id + '/chances').then((res) => {
        this.chances = res.data.returnValue
        _.map(this.chances,item => {
          item.predict_sign_date = moment(item.predict_sign_date).format('YYYY-MM-DD')
          return item
        })
      })
    },
    // 拜访该联系人的拜访记录列表
    getVisits() {
      this.$http.get('/customer/contact/'+ this.$route.params.id  +'/visits').then((res) => {
        this.visitList = res.data.returnValue.map(item => { 
          item.visit_date ? item.visit_date = moment(item.visit_date).format('YYYY-MM-DD') : item.visit_date = ''
          return item
        })
      })
    },
    goForward() {
      this.$router.go(-1)
    },
    modify() {
      this.modifyCustomerForm = this.customerInfo
      this.getCompanyList()
      this.modifyModal = true
    },
    midifyCustomer() {
      this.$http.put('/customer/contact',this.modifyCustomerForm).then((res) => {
        this.$Message.success(res.data.message)
        this.customerInfo = this.modifyCustomerForm
      }).catch(() => {
        this.$Message.error('修改失败，请重试')
      })
    }
  },
  components: {
    modifyBtn
  },
  mounted() {
    this.customerInfo = this.$route.query
    this.getChances()
    this.getVisits()
    this.getCustomerInfo()
  }
}
</script>

